<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天天开心</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #fff9f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow: hidden;
    }
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #ff9900;
      color: white;
      padding: 15px;
      text-align: center;
      z-index: 1000;
    }
    .header h1 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
    .header .domain {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 4px;
    }
    .card {
      position: absolute;
      padding: 12px 18px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 240px;
      word-break: break-all;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px) scale(0.95);
      transition: all 0.3s ease-out;
    }
    .card.active {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .card:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
    .card .tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      margin-right: 8px;
      color: #ff4d4f;
    }
    .card p {
      margin: 6px 0 0 0;
      font-size: 15px;
      line-height: 1.5;
    }
    .more-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      z-index: 999;
      transition: transform 0.2s;
    }
    .more-btn:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>无忧无虑，天天开心</h1>
    <div class="domain"></div>
  </div>
  <div class="more-btn" id="moreBtn">更多</div>

  <script>
    // 祝福语列表（新增更多温馨文案）
    const messages = [
      "每天都有好心情",
      "心想事成",
      "梦想成真",
      "岁岁常欢愉，年年皆胜意",
      "幸福常伴",
      "今天充满惊喜与快乐",
      "永远年轻",
      "笑口常开，好运常伴",,
      "被世界温柔以待",
      "健康快乐",
      "每一天都充满阳光",
      "一切顺利",
      "所行皆坦途，所遇皆美好",
      "笑容常在",
      "年年有今日，岁岁有今朝",
      "被爱与温暖包围",
      "今天充满幸福与喜悦",
      "前程似锦",
      "拥有美好的一年",
      "梦想成真",
      "生活如诗如画",
      "笑口常开",
      "一切如愿以偿",
      "平安喜乐",
      "今天充满惊喜",
      "万事如意",
      "人生如诗，岁月如歌",
      "幸福安康",
      "天天开心",
      "好运连连",
      "新岁不惧岁月长，日日皆有小晴朗",
      "眼里有光，心中有爱，一路向阳",
      "快乐与幸运常伴左右",
      "被全世界的美好温柔以待",
      "每一个愿望都能实现",
      "岁岁平安，年年无忧",
      "生活明朗，万物可爱",
      "往后余生，平安喜乐，得偿所愿",
      "永远保持热爱，奔赴山海"
    ];

    // 颜色列表（新增更多柔和配色）
    const colors = [
      "#f0f9ff", "#e6f7ff", "#f0f0f0", "#fff7eb",
      "#fdf6ec", "#fef0f0", "#f0f0f0", "#f0f0f0",
      "#fce4ec", "#f3e5f5", "#e8f5e9", "#fff3e0",
      "#e3f2fd", "#f8bbd0", "#e0f7fa", "#f5f5f5",
      "#ffe0e9", "#f0e6ff", "#d4edda", "#fff8e1",
      "#e1f5fe", "#faf0f5", "#e8f5e8", "#fafafa"
    ];

    // 创建随机卡片（核心优化：等概率位置算法）
    function createRandomCard() {
      const card = document.createElement('div');
      card.className = 'card';
      
      // 随机选择提示语和颜色
      const message = messages[Math.floor(Math.random() * messages.length)];
      const color = colors[Math.floor(Math.random() * colors.length)];
      
      // 设置卡片内容
      card.innerHTML = `
        <div class="tag">愿❤小宇</div>
        <p>${message}</p >
      `;
      card.style.backgroundColor = color;
      
      // 等概率随机位置计算（关键优化）
      const cardWidth = 240 + 36; // 卡片宽度 + 内边距，确保不超出屏幕
      const cardHeight = 80 + 24; // 卡片预估高度 + 内边距，确保不超出屏幕
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;
      
      // 等概率随机 x 坐标：0 到 (屏幕宽度 - 卡片宽度) 之间均匀分布
      const randomX = Math.random() * (screenWidth - cardWidth);
      // 等概率随机 y 坐标：0 到 (屏幕高度 - 卡片高度) 之间均匀分布（避开顶部导航栏）
      const randomY = Math.random() * (screenHeight - cardHeight - 60) + 30; // 上下各留30px边距
      
      card.style.left = `${randomX}px`;
      card.style.top = `${randomY}px`;
      
      // 添加到页面
      document.body.appendChild(card);
      
      // 添加动画效果
      setTimeout(() => {
        card.classList.add('active');
      }, 10);
      
      // 点击卡片移除
      card.addEventListener('click', () => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px) scale(0.95)';
        setTimeout(() => {
          document.body.removeChild(card);
        }, 300);
      });
      
      // 一段时间后自动移除
      setTimeout(() => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px) scale(0.95)';
        setTimeout(() => {
          if (document.body.contains(card)) {
            document.body.removeChild(card);
          }
        }, 300);
      }, 4000 + Math.random() * 4000);
    }

    // 弹窗速度（保持较快节奏）
    setInterval(createRandomCard, 120);
    
    // 初始创建卡片（均匀分布启动）
    for (let i = 0; i < 8; i++) {
      setTimeout(createRandomCard, i * 100);
    }
    
    // 更多按钮点击事件
    document.getElementById('moreBtn').addEventListener('click', () => {
      for (let i = 0; i < 5; i++) {
        setTimeout(createRandomCard, i * 80);
      }
    });
  </script>
</body>
</html>